<template>
  <div>
    <van-tree-select
      height="90vh"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="ClickNav"
    >
      <template #content>
        <!-- <div>{{items[active].children}}</div> -->
        <div class="goods_item" v-for="(v,i) in items[active].children" :key="i">
          <div class="Goods_title">/{{v.cat_name}}/</div>
          <div class="goods_content">
            <div class="goods_img" v-for="(v1,i1) in v.children" :key="i1">
              <img :src="v1.cat_icon" alt @click="goodsDetail(v1.cat_id)" />
              <div class="goods_name">{{v1.cat_name}}</div>
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
export default {
  name: 'vip',
  data () {
    return {
      items: [
        {
          text: ' 1'
        }
      ],
      active: '0'
    }
  },
  created () {
    console.log(this.items)
    this.getCategorieslList()
  },
  methods: {

    async getCategorieslList () {
      let i = 0
      const items = []
      const { data: res } = await this.$http.get('/categories')

      res.message.forEach(element => {
        items[i] = element
        items[i].text = element.cat_name
        i++
      })
      this.items = items
      console.log(this.items)
    },
    ClickNav (index) {

    },
    goodsDetail (id) {
      console.log(id)
      this.$router.push({ name: 'List', params: { catId: id } })
    }
  }
}
</script>

<style lang="less" scope>
.Goods_title {
  text-align: center;
  margin: 20px 0;
}
.goods_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  .goods_img {
    width: 33.3%;
    text-align: center;
    margin: 10px 0;
    img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
